<template>
    <div>
        <div class="bg">
            <img src="../assets/456.png" alt/>
            <div class="icon"></div>
            <div class="date"> 更新日期:{{ demo }}</div>
        </div>

        <!-- 歌曲列表 -->
        <div>
            <Music :list="arr"/>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //当前日期对象
            demo: "",
            arr:[]
        };
    },
    created() {
        this.getDate()
        this.getHotList()
    },
    methods: {
        getHotList() {
            this.axios({
                method: "get",
                url:"https://apis.netstart.cn/music/playlist/detail",
                params: {
                    id: "280505"
                }
            }).then((res) => {
                console.log(res);
                this.arr = res.data.playlist.tracks.slice(0,19);
            })
        
    },
    //获取当前日期对象
    getDate() {
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        this.demo = year + "年" + month + "月" + day + "日";
        console.log(this.demo);
    }  
}
};
</script>

<style lang="less" scoped>
.bg{
    position: relative;
    .date{
        position: absolute;
        bottom: 30px;
        color: #fff;
        left: 20px;
        z-index: 3;
    }
    .icon{
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 3;
        background: url("../assets/123.png") no-repeat -24px -30px;
        background-size: 166px 97px;
        width: 142px;
        height: 67px;
    }
    img{
        width: 100%;
    }
    &::before{
        content: "";
        width: 100%;
        height: 146px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        background-color: #000;
        opacity: 0.3;
    }
}

</style>
